<template>
    <div id="home">
        <el-card class="m-t-5">
            <img src="@/assets/image/avatar.png">
            <div>超级管理员您好，今天又是元气满满的一天！</div>
        </el-card>

        <div class="speed">
            <div class="title"><i class="i i-speed"></i>功能快捷入口</div>
            <div class="desc">Function Prompt Access</div>
            <ul>
                <router-link to="/active"><i class="i i-active"></i>社区动态</router-link>
                <router-link to="/guide"><i class="i i-guide"></i>办事指南</router-link>
                <router-link to="/party"><i class="i i-party"></i>党建管理</router-link>
                <router-link to="/tenancy"><i class="i i-tenancy"></i>房屋租卖</router-link>
            </ul>
        </div>

        <div class="total">
            <div>
                <div class="title"><i class="i i-count"></i>会员注册量</div>
                <div class="desc">Member Register</div>
                <div id="chartOne"></div>
            </div>
            <div>
                <div class="title"><i class="i i-info"></i>咨询、预约、建议、动态、党建</div>
                <div class="desc">Consultation, Appointment, Suggestion, Dynamic
                    and Party Building</div>
                <div id="chartTwo"></div>
            </div>
        </div>
    </div>
</template>

<script>
    import * as echarts from 'echarts'
    import {
        get
    } from '@/network/request'

    export default {
        name: 'Home',
        data() {
            return {}
        },
        mounted() {
            this.$nextTick(() => {
                // 获取信息
                get('/count', {
                    cid: sessionStorage.getItem('cid')
                }).then(res => {
                    const result = res.data
                    if (result.code == 200) {
                        const ec_date = result.data.date
                        const ec_user = result.data.user
                        const ec_seek = result.data.seek
                        const ec_book = result.data.book
                        const ec_suggest = result.data.suggest
                        const ec_active = result.data.active
                        const ec_party = result.data.party

                        let chartOne = echarts.init(
                            document.getElementById('chartOne')
                        )
                        let chartTwo = echarts.init(
                            document.getElementById('chartTwo')
                        )

                        chartOne.setOption({
                            color: '#43b786',
                            xAxis: {
                                type: 'category',
                                data: ec_date
                            },
                            yAxis: {
                                type: 'value'
                            },
                            series: [{
                                data: ec_user,
                                type: 'line'
                            }]
                        })

                        chartTwo.setOption({
                            tooltip: {
                                trigger: 'item'
                            },
                            legend: {
                                top: '5%',
                                left: 'center'
                            },
                            series: [{
                                name: '模块',
                                type: 'pie',
                                radius: ['40%', '70%'],
                                avoidLabelOverlap: false,
                                itemStyle: {
                                    borderRadius: 10,
                                    borderColor: '#fff',
                                    borderWidth: 2
                                },
                                label: {
                                    show: false,
                                    position: 'center'
                                },
                                emphasis: {
                                    label: {
                                        show: true,
                                        fontSize: '20',
                                    }
                                },
                                labelLine: {
                                    show: false
                                },
                                data: [{
                                        value: ec_seek,
                                        name: '指南咨询'
                                    },
                                    {
                                        value: ec_book,
                                        name: '指南预约'
                                    },
                                    {
                                        value: ec_suggest,
                                        name: '投诉建议'
                                    },
                                    {
                                        value: ec_active,
                                        name: '社区动态'
                                    },
                                    {
                                        value: ec_party,
                                        name: '党建信息'
                                    }
                                ]
                            }]
                        })
                    }
                }).catch()
            })
        }
    }
</script>

<style>
</style>